<template>
  <li>
    <div @click="show = !show">
      {{ model.name }}
      <span v-show="hasChild">【{{ show ? "-" : "+" }}】</span>
    </div>

    <ul v-show="show" v-if="hasChild">
      <TreeItem v-for="item in model.children" :model="item" />
    </ul>
  </li>
</template>

<script>
export default {
  name: "TreeItem",

  props: ["model"],

  data() {
    return {
      show: false,
    };
  },

  computed: {
    hasChild() {
      return this.model.children && this.model.children.length > 0;
    },
  },
};
</script>
